var app = getApp();
Page({
  data: {
    statusBarHeight: app.globalData.navHeight,
    iphoneXheight: 85,
    top: 85,
    index: 0,
    drag_Element: 80,
    btn_switch: false,
    progress_txt: '加载中',
    count: 0, // 设置 计数器 初始为0
    countTimer: null, // 设置 定时器 初始为null
    canvas: true,
    list: [{
      font: '全部',
      number: 2000
    }, {
      font: '已报到',
      number: 100
    }, {
      font: '报到中',
      number: 50
    }, {
      font: '未报到',
      number: 1850
    }],
    content: [{
      url: 'StudentRegistrationProcess/StudentRegistrationProcess',
      image: '../../../static/image/ReportStatus/HeadPortrait1.png',
      icon: '../../../static/image/ReportStatus/sex.png',
      states: '../../../static/image/ReportStatus/3.png',
      name: '王武',
      phone: '19722991222',
      id: '123122421',
      college: '经管学院',
      major: '会计专业',
      _class: '会计1班'
    }, {
      url: 'StudentRegistrationProcess/StudentRegistrationProcess',
      image: '../../../static/image/ReportStatus/HeadPortrait1.png',
      icon: '../../../static/image/ReportStatus/sex.png',
      states: '../../../static/image/ReportStatus/3.png',
      name: '王武',
      phone: '19722991222',
      id: '123122421',
      college: '经管学院',
      major: '会计专业',
      _class: '会计1班'
    }, {
      url: 'StudentRegistrationProcess/StudentRegistrationProcess',
      image: '../../../static/image/ReportStatus/HeadPortrait1.png',
      icon: '../../../static/image/ReportStatus/sex.png',
      states: '../../../static/image/ReportStatus/3.png',
      name: '王武',
      phone: '19722991222',
      id: '123122421',
      college: '经管学院',
      major: '会计专业',
      _class: '会计1班'
    }],
    status: [{
        number: '50',
        statu: '已报到'
      },
      {
        number: '1850',
        statu: '报到中'
      },
      {
        number: '1850',
        statu: '未报到'
      }
    ]
  },
  onLoad: function(options) {
    wx.getSystemInfoSync();
    if (wx.getSystemInfoSync().model != "iPhone X") {
      this.setData({
        iphoneXheight: 65,
        top: 85
      })
    }
    if (app.globalData.systemInfo.system.indexOf('d', 5) === 6) {
      this.setData({
        iphoneXheight: 60,
        top: 373,
        drag_Element: 373
      })
    }
  },
  start: function(event) {
    this.setData({
      btn_switch: true
    })
  },
  move: function(event) {
    if (this.data.btn_switch == true) {
      this.setData({
        top: event.touches[0].clientY - 60,
        drag_Element: event.touches[0].clientY - 60
      })
      console.log(event.touches[0].clientY - 60);
      if (event.touches[0].clientY - 60 <= 0 && this.data.drag_Element <= 85) {
        this.setData({
          top: 85,
          drag_Element: 85
        })
      } else if (event.touches[0].clientY - 60 >= 385) {
        this.setData({
          top: 385,
          drag_Element: 385
        })
      } else if (event.touches[0].clientY - 60 >= 270) {
        this.setData({
          canvas: false
        })
      } else {
        this.setData({
          canvas: true
        })
      }
    }
  },
  end: function(event) {
    this.setData({
      btn_switch: false
    })
  },
  bindchange: function(e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  currentBind: function(e) {
    const that = this;
    if (that.data.currentData === e.currentTarget.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.currentTarget.dataset.current
      })
    }
  },
  drawProgressbg: function() {
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(20); // 设置圆环的宽度
    ctx.setStrokeStyle('#f9c361'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath(); //开始一个新的路径 
    //圆心坐标X,Y,圆半径R,起始弧度(3点方向),弧度结束方向,弧度方向是否逆时针
    ctx.arc(110, 110, 100, 0.25 * Math.PI, 0.75 * Math.PI, true);
    //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    ctx.stroke(); //对当前路径进行描边
    ctx.draw();
  },
  drawCircle_ybd: function(step) {
    var context = wx.createCanvasContext('canvasProgress-1');
    // 设置渐变  
    var gradient = context.createLinearGradient(110, 200, 100, 100);
    gradient.addColorStop("0", "rgb(19,40,76)");
    // gradient.addColorStop("0.5", "rgb(0,158,253)");
    // gradient.addColorStop("1.0", "#ffffff");
    context.setLineWidth(9);
    context.setStrokeStyle(gradient);
    context.setLineCap('round')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(110, 110, 100, 0.75 * Math.PI, step * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw();
  },
  drawCircle_bdz: function(step) {
    var context = wx.createCanvasContext('canvasProgress-2');
    // 设置渐变  
    var gradient = context.createLinearGradient(110, 200, 100, 100);
    gradient.addColorStop("0.5", "rgb(0,158,253)");
    context.setLineWidth(9);
    context.setStrokeStyle(gradient);
    context.setLineCap('round')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(110, 110, 100, 0.75 * Math.PI, step * Math.PI - Math.PI / 1, false);
    context.stroke();
    context.draw()
  },
  drawCircle_wbd: function(step) {
    var context = wx.createCanvasContext('canvasProgress-3');
    // 设置渐变  
    var gradient = context.createLinearGradient(110, 200, 100, 100);
    gradient.addColorStop("1.0", "#ffffff");
    context.setLineWidth(9);
    context.setStrokeStyle(gradient);
    context.setLineCap('round')
    context.beginPath();
    // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
    context.arc(110, 110, 100, 0.75 * Math.PI, step * Math.PI, false);
    context.stroke();
    context.draw()
  },
  countInterval: function() {
    // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
    this.countTimer = setInterval(() => {
      if (this.data.count <= 60) {
        /* 绘制彩色圆环进度条  
        注意此处 传参 step 取值范围是0到2，
        所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
        */
        this.drawCircle_ybd(this.data.count / (60 / 2))
        this.drawCircle_bdz(this.data.count / (60 / 2))
        this.drawCircle_wbd(this.data.count / (60 / 2))
        this.data.count++;
      } else {
        this.setData({
          progress_txt: "报到率"
        });
        clearInterval(this.countTimer);
      }
    }, 100)
  },
  onReady: function() {
    this.drawProgressbg();
    this.drawCircle_ybd(0.5);
    this.drawCircle_bdz(0.5);
    // this.drawCircle_wbd(0.5);
    this.countInterval();
  },
  call_phone: function() {
    wx.makePhoneCall({
      phoneNumber: '10086'
    })
  }
})